<template>
  <div class="job-detail">
    <div class="top-header">
      <div class="title-container">
        <img :src="customerLogo" @click="handleLogoClick" />
        <span class="title" @click="handleLogoClick"> {{ customerDesc }} </span>
        <mineAvatar :isMine="false" />
      </div>
    </div>
    <div class="job-detail-container">
      <searchBox
        ref="searchBox"
        marginTop="6px"
        height="26px"
        :hideHistory="true"
        @getInputData="getInputData"
      >
      </searchBox>
      <div class="main" v-loading="pageLoading">
        <el-scrollbar style="height: 100%">
          <div class="title-box">
            <div class="title-bar">
              <div class="backBtn" @click="handleBackBtnClick">
                <img :src="backBtn" alt="" />
              </div>
              <div class="title-name">
                <!-- <span class="job-title" :title="recruitmentInfo.jtzw">{{
                  recruitmentInfo.jtzw || '-'
                }}</span> -->
                <el-tooltip
                  popper-class="careerToolsItemPopper"
                  placement="right"
                  effect="light"
                  :content="recruitmentInfo.jtzw"
                >
                  <span class="job-title">
                    {{ recruitmentInfo.jtzw || '' }}
                  </span>
                </el-tooltip>
                <span class="job-salary">{{
                  getMoney(recruitmentInfo.xzdy)
                }}</span>
              </div>
              <div class="title-command">
                <span
                  class="command line"
                  v-if="recruitmentInfo.regionid_name"
                  >{{ recruitmentInfo.regionid_name || '-' }}</span
                >
                <span class="command line" v-if="recruitmentInfo.edus">{{
                  recruitmentInfo.edus || '-'
                }}</span>
                <span class="command" v-if="recruitmentInfo.rctypes">{{
                  getTypes(recruitmentInfo.rctypes)
                }}</span>
              </div>
              <div class="title-treatment">
                <span
                  class="treatment"
                  v-for="item in benefitList"
                  :key="item.ylt_name"
                  >{{ item.ylt_name }}</span
                >
                <!-- // 省略显示更多 -->
                <el-popover
                  popper-class="benefitPopover"
                  placement="bottom-end"
                  trigger="click"
                  width="500"
                  v-if="moreBenefitList.length > 6"
                >
                  <!-- <div
                    class="treatment"
                    v-for="item in moreBenefitList"
                    :key="item.ylt_name"
                  >
                    {{ item.ylt_name }}
                  </div> -->
                  <div class="item-content">
                    <div
                      class="treatment"
                      v-for="item in moreBenefitList"
                      :key="item.ylt_name"
                    >
                      {{ item.ylt_name }}
                    </div>
                  </div>
                  <div class="moreIcon" slot="reference">
                    <i class="el-icon-more"></i>
                  </div>
                </el-popover>
              </div>
            </div>
            <div class="operate-bar">
              <template v-if="isShowQRCode == 'true'">
                <el-popover
                  popper-class="qr-code-popover"
                  placement="bottom-end"
                  width="180"
                  offset="4"
                  trigger="hover"
                >
                  <div class="qr-code-box">
                    <img :src="communicateQRCode" class="qr-code" />
                    <span>扫码快速沟通投递</span>
                  </div>
                  <div slot="reference" class="communicate btn mr8">
                    立即沟通
                  </div>
                </el-popover>
                <el-popover
                  popper-class="qr-code-popover"
                  placement="bottom-end"
                  width="180"
                  trigger="hover"
                  @show="handleShowQRCode"
                >
                  <div class="qr-code-box">
                    <img :src="communicateQRCode" class="qr-code" />
                    <span>扫码快速沟通投递</span>
                  </div>
                  <div slot="reference" class="deliver btn mr8">投简历</div>
                </el-popover>
              </template>
              <template v-if="isShowQRCode == 'false'">
                <el-popover
                  popper-class="qr-code-popover"
                  placement="top-end"
                  width="180"
                  offset="4"
                  trigger="hover"
                >
                  <div class="qr-code-box">
                    <span>该岗位暂不支持投递</span>
                  </div>
                  <div slot="reference" class="communicateGrey btn mr8">
                    立即沟通
                  </div>
                </el-popover>
                <el-popover
                  popper-class="qr-code-popover"
                  placement="top-end"
                  width="180"
                  trigger="hover"
                >
                  <div class="qr-code-box">
                    <span>该岗位暂不支持投递</span>
                  </div>
                  <div slot="reference" class="deliverGrey btn mr8">投简历</div>
                </el-popover>
              </template>
              <div
                v-if="isShowQRCode == 'true'"
                :class="[
                  'btn',
                  'mr8',
                  recruitmentInfo.isCollect == 1
                    ? 'isCollected'
                    : 'isNotCollected'
                ]"
                @click="handleCollection"
              >
                {{ recruitmentInfo.isCollect == 1 ? '已收藏' : '收藏' }}
              </div>
              <div class="refine" @click="handleFinishResume">
                <img :src="onlineFile" class="icon" />
                <span>完善在线简历</span>
              </div>
              <div class="refine" @click="handleFinishResume(true)">
                <img :src="uploadFile" class="icon" />
                <span>上传附件简历</span>
              </div>
            </div>
          </div>
          <div class="content-box">
            <div class="box-left">
              <div class="box-left-up">
                <div class="desc-wrapper">
                  <div class="desc-title">岗位描述</div>
                  <div class="job-desc" v-html="employerRequirements"></div>
                  <!-- <div class="job-desc">{{ employerRequirements }}</div> -->
                </div>
                <div class="contact-wrapper">
                  <div class="contact-box">
                    <img class="avatar" :src="employerInfo.pic || avatar" />
                    <div class="contact-info">
                      <div class="up">
                        <div class="name">{{ employerInfo.iname || '' }}</div>
                        <div class="time">
                          {{ employerInfo.activeTime || '' }}
                        </div>
                      </div>
                      <div class="down">
                        <span>{{ companyDetail.cname || '' }}</span>
                        <span class="dot" v-if="employerInfo.pnames"></span>
                        <span>{{ employerInfo.pnames || '' }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box-left-down">
                <div class="title">求职工具</div>
                <div class="tools-box">
                  <el-popover
                    v-for="item in careerToolsList"
                    :key="item.rightId"
                    popper-class="qr-code-popover"
                    placement="bottom-end"
                    width="200"
                    trigger="hover"
                  >
                    <div class="qr-code-box" v-if="item.valid">
                      <img :src="item.qrCodeUrl" class="qr-code" />
                      <span>扫码体验{{ item.title }}服务</span>
                    </div>
                    <el-empty
                      class="empty"
                      description="该校未开通此服务"
                      v-else
                      ><el-button
                        type="primary"
                        size="medium"
                        @click="handleRightQrCode(item)"
                      >
                        我想要了解
                      </el-button>
                    </el-empty>
                    <div class="tool-item" slot="reference">
                      <img :src="item.titleImg" class="tool-icon" alt="" />
                      <div class="item-desc">
                        <span class="name">{{ item.title }}</span>
                        <span class="desc">{{ item.desc }}</span>
                      </div>
                      <img
                        v-if="item.speImgUrl"
                        :src="item.speImgUrl"
                        class="hot"
                        alt=""
                      />
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
            <div class="box-right">
              <div class="info-box">
                <div class="info-title">公司基本信息</div>
                <div class="info-content">
                  <div class="name-box">
                    <div class="logo-box">
                      <img
                        :src="companyDetail.logopath || company"
                        class="logo"
                      />
                    </div>
                    <el-tooltip
                      popper-class="careerToolsItemPopper"
                      placement="left"
                      effect="light"
                      :content="companyDetail.cname"
                    >
                      <div class="name">
                        {{ companyDetail.cname || '' }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="info-wrapper">
                    <div
                      class="info-item"
                      v-if="getName(companyDetail.yuangong)"
                    >
                      <img class="icon" :src="people" />
                      <el-tooltip
                        popper-class="careerToolsItemPopper"
                        placement="left"
                        effect="light"
                        :content="companyDetail.yuangong"
                      >
                        <div class="item-value">
                          {{ getName(companyDetail.yuangong) }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div class="info-item" v-if="getName(companyDetail.cxz)">
                      <img class="icon" :src="company" />
                      <el-tooltip
                        popper-class="careerToolsItemPopper"
                        placement="left"
                        effect="light"
                        :content="companyDetail.cxz"
                      >
                        <div class="item-value">
                          {{ getName(companyDetail.cxz) }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div class="info-item" v-if="getName(companyDetail.trade)">
                      <img class="icon" :src="companyType" />
                      <el-tooltip
                        popper-class="careerToolsItemPopper"
                        placement="left"
                        effect="light"
                        :content="companyDetail.trade"
                      >
                        <div class="item-value">
                          {{ getName(companyDetail.trade) }}
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="info-btn" @click="handleCheckAllCompany">
                    查看该公司所有岗位
                  </div>
                </div>
              </div>
              <div class="recommend-job" v-loading="loading">
                <div class="header">
                  <div class="title">推荐岗位</div>
                  <div class="more" @click="handleCheckMore">更多岗位 ></div>
                </div>
                <div
                  class="recommend-job-list"
                  v-if="jobsRecommendedList.length"
                >
                  <div
                    class="job-item"
                    v-for="item in jobsRecommendedList"
                    :key="item.id"
                    @click="toJobDetail(item)"
                  >
                    <div class="job-name">
                      <span class="name" :title="item.jtzw">{{
                        item.jtzw || ''
                      }}</span>
                      <span class="salary">{{ item.xzdy_new || '' }}</span>
                    </div>
                    <div class="company-name">
                      <div class="logo-box">
                        <img :src="item.logo || company" class="logo-img" />
                      </div>
                      <span class="name" :title="item.cname_all">{{
                        item.cname_all || ''
                      }}</span>
                      <span class="location">{{ item.regionname || '' }}</span>
                    </div>
                  </div>
                </div>
                <el-empty
                  description="暂无数据"
                  v-if="!jobsRecommendedList.length && !loading"
                ></el-empty>
                <div class="check-more-btn" @click="handleCheckMore">
                  查看全部岗位
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import { createQROther, getShareQrRights } from '@/api/home';
import { addBuryingPoint } from '@/api/data';
import {
  employeeBenefits,
  collectJob,
  recommendJobList,
  burryPoint
} from '@/api/job-detail';
import searchBox from '../home/components/searchBox';
import resumeDiagnosis from '@/assets/images/png/resumeDiagnosis.png';
import hot from '@/assets/images/png/hot.png';
import AIInterview from '@/assets/images/png/AIInterview.png';
import assessment from '@/assets/images/png/assessment.png';
import disc from '@/assets/images/png/disc.png';
import avatar from '@/assets/images/png/avatar_default.png';
import company from '@/assets/images/png/company.png';
import people from '@/assets/images/png/people.png';
import companyType from '@/assets/images/png/companyType.png';
import onlineFile from '@/assets/images/png/onlineFile.png';
import uploadFile from '@/assets/images/png/uploadFile.png';
import governmentIcon from '@/assets/home/governmentIcon.png';
import mineAvatar from '../home/components/mineAvatar';

export default {
  name: 'Detail',
  components: {
    searchBox,
    mineAvatar
  },
  data() {
    return {
      hot,
      resumeDiagnosis,
      AIInterview,
      assessment,
      company,
      companyType,
      people,
      disc,
      avatar,
      onlineFile,
      uploadFile,
      governmentIcon,
      customerDesc: '就业创业职业大全云平台',
      customerLogo: '',
      backBtn: require('../../icons/backBtn.png'),
      recruitmentType: {
        0: '应届生',
        1: '社会人才',
        2: '不限'
      },
      SecretKey: '',
      editorContent: '',
      pageLoading: false,
      loading: false,
      inputData: '',
      logo: AIInterview,
      person: AIInterview,
      careerToolsList: [
        {
          rightId: 4,
          title: 'AI简历诊断',
          desc: '定位简历问题',
          titleImg: resumeDiagnosis,
          qrCodeUrl: 'https://img3.job1001.com/data_center/images/career.png',
          speImgUrl: hot,
          valid: false, //权限判断,
          parentId: 11, //后台说只要匹配到父级，那么子几肯定会有这个权益
          etId: 40024 //埋点id
        },
        {
          rightId: 17,
          title: 'AI面评',
          desc: '线上模拟面试',
          titleImg: AIInterview,
          qrCodeUrl: 'https://img3.job1001.com/data_center/images/career.png',
          valid: false, //权限判断,
          parentId: 16,
          etId: 40025 //埋点id
        },
        // {
        //   rightId: 2,
        //   title: "职业测评",
        //   desc: "找到适合自己的职业",
        //   titleImg: assessment,
        //   qrCodeUrl: 'https://img3.job1001.com/data_center/images/career.png',
        //   valid: false, //权限判断,
        //   parentId: 10,
        //   etId: 40023 //埋点id
        // },
        {
          rightId: 1,
          title: '性格测评',
          desc: '了解自己的行为表现，适应不同环境',
          titleImg: disc,
          qrCodeUrl: 'https://img3.job1001.com/data_center/images/career.png',
          valid: false, //权限判断,
          parentId: 14,
          etId: 40022 //埋点id
        }
      ],
      communicateQRCode: '',
      benefitList: [],
      moreBenefitList: [],
      companyDetail: {},
      employerRequirements: '',
      recruitmentInfo: { isCollect: 0 },
      employerInfo: {},
      companyId: '',
      comId: '',
      zp_id: '',
      zptxt: '',
      personId: localStorage.getItem('personId') || '',
      jobsRecommendedList: [],
      isShowQRCode: 'true'
    };
  },
  created() {
    this.isShowQRCode = this.$route.query.isShowQRCode
      ? this.$route.query.isShowQRCode
      : 'true';
    // 如果是从职业详情的工作机会调过来的，就按钮置灰等
    if (this.isShowQRCode == 'false') {
      this.comId = this.$route.query.comId;
      const temp = JSON.parse(localStorage.getItem('jobDetail'));
      this.companyDetail = temp;
      this.recruitmentInfo = temp;
      this.employerRequirements = temp.employerRequirements
        .replace(/\n+/g, '<br/>') // 将换行符替换为 <br/>
        .replace(/\s+/g, '') // 将多个空格替换为一个空格
        .replace(/(<br\/>\s*)+/g, '<br/>')
        .trim(); // 去掉字符串首尾的空格
      this.recommendJobListFn();
    } else {
      this.companyId = this.$route.query.companyId;
      this.zp_id = this.$route.query.zp_id; // 招聘Id
      this.getCompanyDetail();
      this.getZpDetailAndApplyStatus();
      this.employeeBenefitsFn();
      this.getZpTxtDetail();
      this.createCommunicateQRCode();
    }
    if (localStorage.getItem('customerDesc')) {
      this.customerDesc = localStorage.getItem('customerDesc');
      document.title = this.customerDesc;
    }

    const extraJson = localStorage.getItem('extra');
    if (extraJson) {
      const extra = JSON.parse(extraJson);
      this.customerLogo = extra.icon ? extra.icon : this.governmentIcon;
    } else {
      this.customerLogo = this.governmentIcon;
    }

    this.getShareQrRightsFn();
    this.careerToolsList.forEach(async (item) => {
      setTimeout(async () => {
        await this.createQROtherFn(item);
      }, 1500);
    });
  },
  mounted() {
    window.addEventListener('click', this.listenerChangeFlag);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.listenerChangeFlag);
  },
  methods: {
    async handleShowQRCode() {
      const params = {
        etId: 40050,
        cardType: localStorage.getItem('cardType'),
        personId: localStorage.getItem('personId'),
        eventType: 20,
        sourceType: 60,
        jumpSource: 60
      };
      await addBuryingPoint(params);
    },
    getName(val) {
      if (val == '未公布' || val == '未发布' || !val) {
        return '';
      }
      return val;
    },
    getMoney(val) {
      if (val == '0-0元/月' || !val) {
        return '面议';
      }
      // 去掉元和第一个k
      return val.replace('元', '').replace('k', '');
    },
    listenerChangeFlag(e) {
      let nowClassName = e.target.className;
      if (nowClassName != 'search' && nowClassName != 'el-input__inner') {
        this.$refs.searchBox && this.$refs.searchBox.clickInputOutside();
      }
    },
    toJobDetail(item) {
      let routeData = this.$router.resolve({
        path: `/job-detail?companyId=${item.uid}&zp_id=${item.id}`
      });
      window.open(routeData.href, '_blank');
    },
    async burryPointFn() {
      const params = {
        personId: localStorage.getItem('personId'),
        burryPage: this.customerDesc,
        eventType: '6',
        description: this.recruitmentInfo.jtzw,
        param: this.recruitmentInfo.id
      };
      await burryPoint(params);
    },
    // 获取企业详情
    async getCompanyDetail() {
      const params = {
        op: 'company_cache',
        func: 'getCompanyDetail',
        version: '',
        forName: 'company',
        param: {
          company_id: this.companyId
        }
      };
      const res = await employeeBenefits(params);
      if (res.code == 200) {
        this.companyDetail = res.data;
      }
    },
    // 获取企业招聘详情
    async getZpDetailAndApplyStatus() {
      this.pageLoading = true;
      const params = {
        op: 'company_cache',
        func: 'getZpDetailAndApplyStatus',
        version: '',
        forName: 'company',
        param: {
          zp_id: this.zp_id,
          person_id: this.personId
        }
      };
      const res = await employeeBenefits(params);
      this.pageLoading = false;
      if (res.code == 200) {
        this.recruitmentInfo = res.data;
        this.batchGetBingdingPersonInfo();
        this.burryPointFn();
        this.recommendJobListFn();
        this.$bus.$emit('generalReportAction', {
          etId: 40045,
          personId: localStorage.getItem('personId'),
          cardType: localStorage.getItem('cardType'),
          jumpSource: 60,
          sourceType: 60,
          eventData: this.recruitmentInfo.jtzw
        });
      }
    },
    // 获取招聘要求
    async getZpTxtDetail() {
      const params = {
        op: 'company_cache',
        func: 'getZpTxtDetail',
        version: '',
        forName: 'company',
        param: {
          zp_id: this.zp_id,
          conditionArr: { job_skill: '1' }
        }
      };
      const res = await employeeBenefits(params);
      if (res.code == 200) {
        if (res.data.zptxt) {
          this.employerRequirements = res.data.zptxt
            .replace(/\n+/g, '<br/>') // 将换行符替换为 <br/>
            .replace(/\s+/g, '') // 将多个空格替换为一个空格
            .replace(/(<br\/>\s*)+/g, '<br/>') // 将多个<br/>替换为一个 <br/>
            .trim(); // 去掉字符串首尾的空格
        }
      }
    },
    // 获取企业福利
    async employeeBenefitsFn() {
      const params = {
        op: 'company_cache',
        func: 'get_comapny_tags',
        version: '',
        forName: 'company',
        param: {
          company_id: this.companyId
        }
      };
      const res = await employeeBenefits(params);
      if (res.code == 200) {
        this.benefitList = res.data.slice(0, 6);
        this.moreBenefitList = res.data;
      }
    },
    // 获取企业招聘人信息
    async batchGetBingdingPersonInfo() {
      const params = {
        op: 'person_job_slave',
        func: 'batchGetBingdingPersonInfo',
        version: '',
        forName: 'company',
        param: {
          jobidArr: this.recruitmentInfo.id
        }
      };
      const res = await employeeBenefits(params);
      if (res.code == 200) {
        this.employerInfo = res.data[0];
      }
    },
    // 岗位推荐列表
    async recommendJobListFn() {
      const params = {
        matchZpName: this.recruitmentInfo.jtzw,
        pageNo: 1,
        pageSize: 6,
        idFilter: this.recruitmentInfo.id,
        keytypes: '3'
      };
      if (localStorage.getItem('extra')) {
        const extra = JSON.parse(localStorage.getItem('extra'));
        if (extra.regionId) {
          params.regionId = extra.regionId;
        }
      }
      this.loading = true;
      recommendJobList(params)
        .then((res) => {
          if (res.code == 200) {
            this.jobsRecommendedList = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getTypes(value) {
      return this.recruitmentType[value] || value || '未知';
    },
    handleCheckAllCompany() {
      let path;
      if (this.isShowQRCode == 'false') {
        path = `/company-detail?comId=${this.comId}&isShowQRCode=false`;
      } else {
        path = `/company-detail?companyId=${this.companyId}&zp_id=${this.zp_id}&companyName=${this.companyDetail.cname}`;
      }
      let routeData = this.$router.resolve({
        path
      });
      window.open(routeData.href, '_blank');
    },
    handleCheckMore() {
      sessionStorage.setItem('switchToCampus', 1);
      let path = '/position';
      let routeData = this.$router.resolve({
        path
      });
      window.open(routeData.href, '_blank');
    },
    handleFinishResume(flag) {
      let path = flag ? '/mine?openUpload=true' : '/mine';
      let routeData = this.$router.resolve({
        path
      });
      window.open(routeData.href, '_blank');
    },
    handleCollection() {
      const params = {
        dataId: this.recruitmentInfo.id,
        dataType: '10',
        action: this.recruitmentInfo.isCollect == '1' ? '0' : '1' // 1 收藏 0 取消收藏
      };
      collectJob(params).then((res) => {
        if (res.code == 200) {
          this.recruitmentInfo.isCollect = params.action;
          this.$message.success(
            params.action == '1' ? '收藏成功' : '已取消收藏'
          );
        } else {
          this.$message.error('收藏失败');
        }
      });
    },
    getInputData(inputData) {
      this.inputData = inputData;
    },
    handleLogoClick() {
      this.$router.push({
        path: '/position',
        query: {
          superToken: this.$route.query.superToken || '',
          SecretKey: this.$route.query.SecretKey || '',
          customerName: this.$route.query.customerName || ''
        }
      });
    },
    // 创建二维码
    async createQROtherFn(careerToolsItem) {
      const cardType = localStorage.getItem('cardType')
        ? localStorage.getItem('cardType')
        : '28';
      const params = {
        path: 'pagesSub/careerGrow/dataCenterParse/index',
        scene: `ct=${cardType}&rightId=${
          careerToolsItem.rightId
        }&force=1&role=${localStorage.getItem('roleType')}`
      };
      const res = await createQROther(params);
      if (res.code == 200) {
        careerToolsItem.qrCodeUrl = res.data;
      }
    },
    async createCommunicateQRCode() {
      const params = {
        path: 'pagesSub/public/jobDetail/index',
        scene: `jobId=${this.zp_id}&etId=40051&sc=g`
      };
      const res = await createQROther(params);
      if (res.code == 200) {
        this.communicateQRCode = res.data;
      }
    },
    handleBackBtnClick() {
      this.$router.push({
        path: '/position',
        query: {
          superToken: this.$route.query.superToken || '',
          SecretKey: this.$route.query.SecretKey || ''
        }
      });
    },
    handleMine() {
      this.$router.push({
        path: '/mine',
        query: {
          id: this.$route.query.id,
          superToken: this.$route.query.superToken || '',
          SecretKey: this.$route.query.SecretKey || '',
          customerName: this.$route.query.customerName
        }
      });
    },
    async getShareQrRightsFn() {
      const res = await getShareQrRights();
      if (res.code == 200) {
        //给每个工具添加权限返回的res.data里包含跟工具对应的权限信息rightId，将valid赋值为true
        this.careerToolsList.forEach((item) => {
          const right = res.data.find((r) => r.rightId === item.parentId);
          if (right) {
            item.valid = true;
          }
        });
      }
    },
    handleRightQrCode(item) {
      this.$bus.$emit('generalReportAction', {
        etId: item.etId,
        personId: localStorage.getItem('personId'),
        cardType: localStorage.getItem('cardType'),
        jumpSource: 60,
        sourceType: 60
      });
      setTimeout(async () => {
        this.$message.success('已将意愿反馈给老师');
      }, 500);
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.qr-code-popover ::v-deep .el-popover {
  border-radius: 8px; // 不生效
}

.spe-button {
  border-radius: 8px;
}

.qr-code-popover {
  .qr-code-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #333333;
    .qr-code {
      width: 148px;
      height: 148px;
      margin-bottom: 14px;
    }
    .qr-code-title {
      width: 148px;
      height: 120px;
      // margin-bottom: 14px;
      align-content: center;
      text-align: center;
    }
    .qr-code-btn {
      width: 120px;
      height: 40px;
      margin-bottom: 14px;
      line-height: 40px;
      text-align: center;
      border-radius: 8px;
      background-color: #4880ff;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .empty {
    margin: auto;
    height: 220px;
    ::v-deep .el-empty__image {
      width: 120px;
    }
  }
}

.benefitPopover {
  display: flex;
  top: 140px !important;
  .item-content {
    display: flex;
    flex-wrap: wrap; /* 添加这一行以允许换行 */
    justify-content: space-between;
    .treatment {
      padding: 0px 6px;
      background: #e5efff;
      border-radius: 4px;
      font-size: 15px;
      color: #0b6eff;
      margin-bottom: 6px;
      width: fit-content;
      width: auto;
      height: 26px;
      line-height: 26px;
      white-space: nowrap;
      margin: 4px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.job-detail {
  position: relative;
  background: #f7f8fa;
  min-height: 100%;
  min-width: 1190px;
  .top-header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(7px);
    background-size: 100% 57px;
    z-index: 2;
    .title-container {
      display: flex;
      align-items: center;
      padding-left: 25px;
      color: #fff;
      font-size: 17px;
      line-height: 24px;
      letter-spacing: 2px;
      .title {
        font-family: 'title-home-font';
        cursor: pointer;
        max-width: 26vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .mine {
        color: #fff;
        cursor: pointer;
        position: fixed;
        display: flex;
        align-items: center;
        font-size: 14px;
        top: 20px;
        right: 20px;
        .avatar {
          height: 24px;
          width: 24px;
          margin: 0 24px 0 8px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      img {
        width: 24px;
        height: auto;
        cursor: pointer;
        margin-right: 5px;
      }
    }
  }
  ::v-deep .search-box {
    width: auto;
  }
  .job-detail-container {
    width: 100%;
    height: 100%;
    display: flex;
    background: url('../../assets/home/back.png') no-repeat;
    flex-direction: column;
    background-size: 100.1% 100%;
    align-items: center;
    min-width: 1375px;
    .main {
      height: calc(100vh - 79px);
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      margin-top: 26px;
      background-color: white;
      width: calc(100vw - 36px);
      min-width: 1375px;
      display: flex;
      flex-direction: column;
      .title-box {
        padding: 28px 0 18px 28px;
        .title-bar {
          display: flex;
          align-items: center;
          .backBtn {
            width: 36px;
            height: 36px;
            margin-right: 16px;
            img {
              width: 36px;
              height: 36px;
            }
          }
          .title-name {
            display: flex;
            align-items: center;
            .job-title {
              max-width: 340px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font-weight: 600;
              font-size: 26px;
              color: #000000;
            }
            .job-salary {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 24px;
              color: #d5413d;
              margin-left: 48px;
            }
          }
          .title-command {
            display: flex;
            align-items: center;
            margin-left: 48px;
            .command {
              font-family: PingFangSC, PingFang SC;
              font-size: 16px;
              color: #666666;
              padding: 0 11px;
            }
            .line {
              position: relative;
              &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: 11px;
                background: #e5e6eb;
                transform: translateY(-50%);
              }
            }
          }
          .title-treatment {
            margin-left: 48px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .treatment {
              flex-shrink: 0;
              padding: 4px 12px;
              background: #ededed;
              border-radius: 4px;
              font-size: 15px;
              color: #555555;
              margin: 0 8px 0 0;
            }
            .moreIcon {
              padding: 0 12px 0 12px;
              background: #ededed;
              cursor: pointer;
              color: #555;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 25px;
            }
          }
        }
        .operate-bar {
          display: flex;
          align-items: center;
          margin-top: 20px;
          .communicateGrey {
            background: #f39e8f;
            cursor: not-allowed !important;
          }
          .deliverGrey {
            background: #a0cfff;
            cursor: not-allowed !important;
          }
          .mr8 {
            margin-right: 8px;
          }
          .btn {
            padding: 9px 36px;
            color: #fff;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
          }
          .communicate {
            background: #dd6652;
          }
          .deliver {
            background: #4880ff;
          }
          .collection {
            border: 1px solid #4880ff;
            color: #4880ff;
          }
          .isCollected {
            border: 1px solid #dd6652;
            color: #dd6652;
          }
          .isNotCollected {
            border: 1px solid #4880ff;
            color: #4880ff;
          }
          .refine {
            font-size: 15px;
            color: #4880ff;
            margin-left: 26px;
            cursor: pointer;
            display: flex;
            align-items: center;
            .icon {
              width: 16px;
              height: 16px;
              margin-right: 6px;
            }
          }
        }
      }
      .content-box {
        display: flex;
        background: #f0f3f8;
        padding: 12px 0 18px 0;
        .box-left {
          flex: 1;
          border-radius: 0px 8px 8px 0px;
          .box-left-up {
            border-radius: 0px 8px 8px 0px;
            background: #fff;
            .desc-wrapper {
              background-image: url('../../assets/images/png/contentBg.png');
              background-size: 100% 97px;
              background-repeat: no-repeat;
              background-position: center top;
              padding: 29px 24px 0 24px;
              min-height: 39vh;
              .desc-title {
                font-weight: 600;
                font-size: 22px;
                color: #000000;
                margin-bottom: 22px;
              }
              .job-desc {
                line-height: 30px;
                font-size: 15px;
                color: #555555;
              }
            }
            .contact-wrapper {
              width: calc(100% - 48px);
              margin: 32px 0 0 24px;
              border-top: 1px solid #cfd8f5;
              padding: 28px 24px 28px 0;
              .contact-box {
                display: flex;
                align-items: center;
                .avatar {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  margin-right: 12px;
                }
                .contact-info {
                  .up {
                    display: flex;
                    align-items: center;
                    .name {
                      font-weight: 600;
                      font-size: 18px;
                      color: #333333;
                      margin-right: 14px;
                    }
                    .time {
                      font-size: 14px;
                      color: #afafaf;
                    }
                  }
                  .down {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #999999;
                    margin-top: 6px;
                    .dot {
                      width: 2px;
                      height: 2px;
                      border-radius: 50%;
                      background: #999999;
                      margin: 0 8px;
                    }
                  }
                }
              }
            }
          }
          .box-left-down {
            margin-top: 14px;
            border-radius: 0px 8px 0px 0px;
            padding: 28px 24px;
            background-color: #fff;
            .title {
              font-weight: 600;
              font-size: 22px;
              color: #000000;
              margin-bottom: 34px;
            }
            .tools-box {
              display: flex;
              align-items: center;
              // justify-content: space-between;
              .tool-item {
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
                margin-right: 124px;
                .tool-icon {
                  width: 52px;
                  height: 66px;
                  margin-right: 12px;
                }
                .hot {
                  position: absolute;
                  top: -8px;
                  right: -41px;
                  width: 38px;
                  height: 28px;
                }
                .item-desc {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  margin-bottom: 14px;
                  .name {
                    font-weight: 800;
                    font-size: 18px;
                    color: #222222;
                    margin-bottom: 11px;
                  }
                  .desc {
                    font-size: 14px;
                    color: #a2a5b3;
                  }
                }
              }
            }
          }
        }
        .box-right {
          width: 280px;
          margin-left: 12px;
          .info-box {
            overflow: hidden;
            background: #fff;
            border-radius: 8px 0px 0px 8px;
            .info-title {
              padding: 16px;
              background: linear-gradient(
                175deg,
                #e7fff5 0%,
                rgba(255, 255, 255, 0) 80%
              );
              font-weight: 800;
              font-size: 16px;
              color: #222222;
            }
            .info-content {
              padding: 0 16px 16px 16px;
              .name-box {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                .logo-box {
                  width: 45px;
                  height: 45px;
                  margin-right: 13px;
                  border-radius: 4px;
                  border: 1px solid #e5e5e5;
                  padding: 2px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .logo {
                    width: 39px;
                    height: auto;
                  }
                }
                .name {
                  font-weight: 400;
                  font-size: 15px;
                  color: #555555;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
              .info-wrapper {
                .info-item {
                  display: flex;
                  margin-bottom: 14px;
                  &:last-child {
                    margin-bottom: 0;
                  }
                  .icon {
                    width: 14px;
                    height: 14px;
                    margin-right: 15px;
                  }
                  .item-value {
                    font-size: 14px;
                    color: #555555;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
              .info-btn {
                font-size: 15px;
                margin-top: 18px;
                color: #4880ff;
                height: 38px;
                line-height: 36px;
                text-align: center;
                background: rgba(72, 128, 255, 0.05);
                border-radius: 8px;
                border: 1px solid #4880ff;
                cursor: pointer;
              }
            }
          }
          .recommend-job {
            margin-top: 12px;
            overflow: hidden;
            background: #fff;
            border-radius: 8px 0px 0px 8px;
            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-radius: 8px 0px 0px 0px;
              padding: 16px;
              background: linear-gradient(
                175deg,
                #e7fff5 0%,
                rgba(255, 255, 255, 0) 80%
              );
              margin-bottom: 8px;
              .title {
                font-weight: 800;
                font-size: 16px;
                color: #222222;
              }
              .more {
                font-size: 14px;
                color: #999999;
                cursor: pointer;
              }
            }
            .recommend-job-list {
              padding: 0 0 16px 16px;
              .job-item {
                margin-bottom: 21px;
                margin-right: 16px;
                cursor: pointer;
                &:last-child {
                  margin-bottom: 18px;
                }
                .job-name {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 10px;
                  .name {
                    width: 145px;
                    font-size: 14px;
                    color: #555555;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                  }
                  .salary {
                    font-weight: 600;
                    font-size: 14px;
                    color: #d5413d;
                  }
                }
                .company-name {
                  display: flex;
                  align-items: center;
                  .logo-box {
                    width: 24px;
                    height: 24px;
                    background: #ffffff;
                    border-radius: 2px;
                    border: 1px solid #f3f5fb;
                    margin-right: 7px;
                    padding: 2px;
                    .logo-img {
                      width: 20px;
                      height: auto;
                    }
                  }
                  .name {
                    width: 130px;
                    font-size: 12px;
                    color: #a2a5b3;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .location {
                    margin-left: auto;
                    font-size: 12px;
                    color: #a2a5b3;
                  }
                }
              }
            }
            .check-more-btn {
              margin: 0 18px 18px 18px;
              font-size: 15px;
              color: #4880ff;
              height: 38px;
              line-height: 36px;
              text-align: center;
              background: rgba(72, 128, 255, 0.05);
              border-radius: 8px;
              border: 1px solid #4880ff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
